import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaTab, WeaTop, WeaRightMenu, WeaAlertPage, WeaLocaleProvider } from 'ecCom';
import { Button, Modal } from 'antd';
import { toJS } from 'mobx';
import { WeaTableNew } from 'comsMobx';

const WeaTable = WeaTableNew.WeaTable;
import ViewSms from '../public/ViewSms/ViewSms';

const getLabel = WeaLocaleProvider.getLabel;

const confirm = Modal.confirm;


@inject('smsManageStore')
@observer
class SmsList extends React.Component {
	constructor(props) {
		super(props);
	}
	componentDidMount() {
		const { smsManageStore } = this.props;
		smsManageStore.setPageName(this.props.type);
		smsManageStore.initData();
	}
    render() {
		let topTab = [
			{
				groupid: 'flowAll',
				title: getLabel(332, '全部'),
				timeSag: 0,
			},

			{
				groupid: 'flowNew',
				title: getLabel(15537, '今天'),
				timeSag: 1,
			},
			{
				groupid: 'flowNew',
				title: getLabel(15539, '本周'),
				timeSag: 2,
			},
			{
				groupid: 'flowNew',
				title: getLabel(15541, '本月'),
				timeSag: 3,
			},
			{
				groupid: 'flowNew',
				title: getLabel(21904, '本季'),
				timeSag: 4,
			},
			{
				groupid: 'flowNew',
				title: getLabel(15384, '本年'),
				timeSag: 5,
			},
		];

		const { smsManageStore } = this.props;
		const { dataKey, comsWeaTableStore } = smsManageStore;
		// const tableNow = comsWeaTableStore.state[dataKey.split('_')[0]] || comsWeaTableStore.state['init'];
		const tableNow = comsWeaTableStore;
		let title = getLabel(16443, '我的短信');
		if (this.props.type === 'mySms') {
			title = getLabel(16443, '我的短信');
		} else if (this.props.type === 'allSms') {
			title = getLabel(16891, '短信管理');
		}
		if (smsManageStore.manageRight != '') {
			if (smsManageStore.manageRight === 'y') {
				return (
					<div className="sms-list" id="sms-list">
						<ViewSms ecId={`${this && this.props && this.props.ecId || ''}_ViewSms@65zx2w`}
  visible={smsManageStore.viewSms}
  doClose={() => {
								smsManageStore.closeViewSms();
							}}
  smsId={smsManageStore.smsId}
						/>

						<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@bfjye4`} datas={this.getRightMenu(dataKey, comsWeaTableStore)} onClick={this.onRightMenuClick.bind(this)}>
							<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@zcqjhx`}
  title={title}
  loading={smsManageStore.loading}
  icon={<i className="icon-coms-message" />}
  iconBgcolor="#0079de"

  buttons={this.getTopButtons(dataKey, comsWeaTableStore)}
  showDropIcon={true}
  dropMenuDatas={this.getRightMenu(dataKey, comsWeaTableStore)}
  onDropMenuClick={this.onRightMenuClick.bind(this)}
							>
								<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@jucwtu`}
  datas={topTab}
  keyParam="timeSag"
  searchType={['base', 'advanced']}
  showSearchAd={smsManageStore.ifShowSearchAd}
									// 这里接收的是切换显隐之后相应的bool值
  setShowSearchAd={(bool) => {
										smsManageStore.setShowSearchAd(bool);
									}}
  selectedKey={smsManageStore.viewcondition}
  searchsBaseValue={smsManageStore.form.getFormParams().msg}
  searchsAd={smsManageStore.getSearchs(smsManageStore)}
  buttonsAd={smsManageStore.getTabButtonsAd(smsManageStore)}
  onSearch={(v) => { smsManageStore.doSearch(); }}
  onSearchChange={(v) => { smsManageStore.setFormFields({ msg: { value: v } }); }}
  countParam="groupid"
  onChange={this.changeData.bind(this)}
  advanceHeight={this.props.type === 'mySms' ? 180 : 210}
								/>
								<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@cf6spd`}
  sessionkey={dataKey}
  hasOrder={true}
  needScroll={true}
  onOperatesClick={this.onOperatesClick}
  comsWeaTableStore={comsWeaTableStore}
  getColumns={this.getNewColumns}
								/>
							</WeaTop>
						</WeaRightMenu>

					</div>
				);
			}
				return (
					<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@psthk3`}>
						<div>
							{getLabel(2012, '对不起，您暂时没有权限！')}
						</div>
					</WeaAlertPage>);
		}
			return (<div />);
    }

    getTopButtons(dataKey, comsWeaTableStore) {
		const tableKey = dataKey !== '0' ? dataKey.split('_')[0] : 'init';
		// const selectedRowKeys = toJS(comsWeaTableStore).state[tableKey.substring(0, 36)].selectedRowKeys;
		const selectedRowKeys = toJS(comsWeaTableStore).selectedRowKeys;
		// console.log('selectedRowKeys', selectedRowKeys)
		let btns = [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@t1kky9@getTopButtons_deleteBtn`} type="primary" disabled={selectedRowKeys.length === 0} onClick={() => { this.onRightMenuClick(0); }}>{getLabel(91, '删除')}</Button>];
		return btns;
    }

    // 右键菜单
    getRightMenu(dataKey, comsWeaTableStore) {
        let btns = [];
        const tableKey = dataKey !== '0' ? dataKey.split('_')[0] : 'init';
		// const selectedRowKeys = toJS(comsWeaTableStore).state[tableKey.substring(0, 36)].selectedRowKeys;
		const selectedRowKeys = toJS(comsWeaTableStore).selectedRowKeys;

        btns.push({
            icon: <i className="icon-coms-delete" />,
            disabled: selectedRowKeys.length === 0,
            content: getLabel(91, '删除'),
        });
		btns.push({
			key: 'colSet',
			icon: <i className="icon-coms-Custom" />,
			content: getLabel(382660, '显示定制列'),
			onClick: (key) => {
				comsWeaTableStore.setColSetVisible(dataKey, true);
				comsWeaTableStore.tableColSet(dataKey, true);
			},
        });
        return btns;
    }

    // 右键菜单事件绑定
    onRightMenuClick(key) {
		const { smsManageStore, type } = this.props;
		const { dataKey, comsWeaTableStore } = smsManageStore;
		const tableKey = dataKey !== '0' ? dataKey.split('_')[0] : 'init';
		// const selectedRowKeys = toJS(comsWeaTableStore).state[tableKey.substring(0, 36)].selectedRowKeys;
		const selectedRowKeys = toJS(comsWeaTableStore).selectedRowKeys;

		let ids = '';
        if (key == '0') {
			confirm({
				title: getLabel(131329, '信息确认'),
				content: (<span style={{ color: 'red' }}>{getLabel(15097, '确定要删除吗？')}</span>),
				onOk() {
					for (let i = 0; i < selectedRowKeys.length; i++) {
						if (ids != '') { ids += ','; }
						ids += selectedRowKeys[i];
					}

					if (type === 'mySms') {
						smsManageStore.doCancel({ messageIds: ids }).then((rdata) => {
							smsManageStore.doSearch();
						});
					} else if (type === 'allSms') {
						smsManageStore.doDel({ messageIds: ids }).then((rdata) => {
							smsManageStore.doSearch();
						});
					}
				},
				onCancel() {

				},
			});
        }
    }

    onOperatesClick = (record, index, operate, flag, argumentString) => {
        let smsManageStore = this.props.smsManageStore;
		let operateType = operate.index;
        if (operateType == 0) {
			confirm({
				title: getLabel(131329, '信息确认'),
				content: (<span style={{ color: 'red' }}>{getLabel('826,22408', '确定重新发送')}?</span>),
				onOk() {
					smsManageStore.reSend({ messageIds: record.id }).then((rdata) => {
						smsManageStore.doSearch();
					});
				},
				onCancel() {

				},
			});
        } else if (operateType == 1) {
			this.viewSms(record.id);
			// smsManageStore.setSmsId(record.id)
            // smsManageStore.openViewSms();
        } else if (operateType == 2) {
			confirm({
				title: getLabel(131329, '信息确认'),
				content: (<span style={{ color: 'red' }}>{getLabel(15097, '确定要删除吗？')}</span>),
				onOk() {
					if (smsManageStore.pageName === 'mySms') {
						smsManageStore.doCancel({ messageIds: record.id }).then((rdata) => {
							smsManageStore.doSearch();
						});
					} else if (smsManageStore.pageName === 'allSms') {
						smsManageStore.doDel({ messageIds: record.id }).then((rdata) => {
							smsManageStore.doSearch();
						});
					}
				},
				onCancel() {

				},
			});
        }
    }


    // 自定义过滤渲染
    getNewColumns = (columns) => {
        let newColumns = '';
        newColumns = columns.map((column) => {
            let newColumn = column;
            // 表格的标题列的前端元素改造
            if (newColumn.dataIndex === 'message') {
                newColumn.render = (text, record, index) => {
					let valueSpan = record[`${newColumn.dataIndex}span`] !== undefined ? record[`${newColumn.dataIndex}span`] : record[newColumn.dataIndex];
                    return (
						<div className="wea-url-name" style={{ cursor: 'pointer' }} onClick={() => { this.viewSms(record.id); }} dangerouslySetInnerHTML={{ __html: valueSpan }} />
                    );
                };
            }
            return newColumn;
        });
        return columns;
    }

    changeData(theKey) {
		let smsManageStore = this.props.smsManageStore;
		smsManageStore.setFormFields({ timeSag__fromdate__enddate: { value: theKey } });
		smsManageStore.doSearch();
	}

	viewSms = (id) => {
		let smsManageStore = this.props.smsManageStore;
		smsManageStore.setSmsId(id);
		smsManageStore.openViewSms();
	}
}

export default SmsList;
